import {Control} from "react-keeper";
require('./PageBm.less');

import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions';
import {List, NavBar, Modal, Button, Badge} from 'antd-mobile';
import tphouse from '../../../assets/icon/房子A.png';
import Store from './Store';
import InfoView from '../../../components/info/InfoView';
import StorageUtils from "../../../app/storage";

const Item = List.Item;
const Brief = Item.Brief;

class MyBm extends React.Component {
  constructor(props) {
    super(props);

    this.goCast = this.goCast.bind(this);
    this.goNoCast = this.goNoCast.bind(this);
  }

  goCast(e) {
    Modal.alert('报名', '你确定要参与业委会选举？', [
      { text: '确定', onPress: () => Actions.caseOk(e), style: 'default'},
      { text: '取消', onPress: () => console.log('cancel'), style: 'default'},
    ]);
    // Actions.caseOk(e);

  }

  goNoCast(e) {
    Actions.caseNo(e);
  }

  render() {

    let t = this;
    let proprietor = StorageUtils.getStorageItem('proprietor');
    return (

      <div className="container" id="container">
        <NavBar mode="dark">业委会竞选报名</NavBar>
        <InfoView info={this.state.bm.userInfo} proprietor={proprietor} />
        <List>
          {
            t.state.bm.doors && t.state.bm.doors.length > 0 ?
              t.state.bm.doors.map((item,i)=>{
                return (
                  <List.Item
                    thumb={tphouse}
                    className="special-badge"
                    extra={
                      item.castUnit ?
                        <Badge text="已报名" />
                        :
                        <Button type="primary" size="small" onClick={(e)=>{this.goCast(item.id);}} inline>报名</Button>
                    }
                  >
                    <span style={{ marginLeft: 12 }}>{item.courtName}({item.building+"栋"+item.unit+"单元"+item.doorplateNo})</span>
                  </List.Item>
                )
              })
              :
              <Item
                arrow="horizontal"
                thumb={tphouse}
                multipleLine
                onClick={() => {}}
                platform="android"
              >
                <a style={{ display: 'block', color: '#108ee9' }}>
                  小区:
                </a>
                <a style={{ display: 'block', color: '#108ee9' }}>
                  门牌:
                </a>
              </Item>
          }
        </List>
      </div>
    );
  }

  componentWillMount() {
    Actions.initMode();
  }

  componentDidMount() {
    Actions.enterInfo();
  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.bm || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  componentWillUpdate(nextProps, nextState) {

  }


  componentDidUpdate(prevProps, prevState) {

  }


  componentWillUnmount() {

  }

}

ReactMixin.onClass(MyBm, Reflux.connect(Store, 'bm'));


export default MyBm ;
